<template>
  <section ref="refChart" class="chart_wrap" :class="className" :style="{ height: height, width: width }"></section>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch, nextTick } from "vue";
import * as echarts from "echarts";

/**
 * 父组件参数
 */
const props = defineProps({
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
  chartFontColor: {
    type: String,
    default: "#000",
  },
  autoResize: {
    type: Boolean,
    default: true,
  },
  chartData: {
    type: Object,
    required: true,
  },
  txtFontSize: {
    type: Number,
    default: 15,
  },
});

/**
 * 定义变量
 */
let myChart = null; // 图表
const refChart = ref(null); // 图表ref

/**
 * 监听数据
 */
watch(
  props.chartData,
  (val) => {
    setOption(val);
  },
  { deep: true }
);

/**
 * 方法
 */
/**
 * 工具方法
 */
const setProxyData = (proxyData) => JSON.parse(JSON.stringify(proxyData));

/**
 * 图表相关
 */
// 销毁图表
const destroyChart = (next) => {
  if (myChart) {
    myChart.dispose();
    myChart = null;

    if (next) {
      next();
    }
  }
};
// 重置图表
const resetChart = () => {
  // console.log("初始化图表", myChart)

  destroyChart(() => {
    // 重新启动图表
    initChart();
  });
};
// 初始化图表
const initChart = () => {
  myChart = echarts.init(refChart.value, "macarons");
  // chatLoading("start")
  setOption(props.chartData);
};

const chatLoading = (flag) => {
  // console.log("loading状态", flag)
  switch (flag) {
    case "start":
      myChart.showLoading();  // 开启loading状态 开始渲染
      break;
    case "end":
      myChart.hideLoading();  // 关闭loading状态 渲染完成
      break;
  }
}

// 设置图表
const setOption = ({ dataMax, score } = {}) => {
  // 绘制图表
  myChart.setOption(
    // ----------------------------  图表配置开始
    {
      radar: {
        // radius: "70",
        // indicator: dataMax, // 配置各个维度的最大值
        // center: ['50%', '50%'],
        radius: '65%',
        indicator: dataMax, // 配置各个维度的最大值
      },
      series: [
        {
          type: "radar", // 4. radar 此图表时一个雷达图
          data: [
            {
              name: "健康度",
              // value: score,
              value: score,
            },
          ],
        },
      ],
    }
    // ----------------------------  图表配置结束
  );
  window.onresize = function () {
    // 自适应大小
    myChart.resize();
  };
};

/**
 * 生命周期
 */
onMounted(() => {
  nextTick(() => {
    initChart(); // 初始化图表
  });
});
onBeforeUnmount(() => {
  destroyChart(); // 销毁图表
});

/**
 * 暴露方法
 */
defineExpose({
  resetChart,
  chatLoading
});
</script>

<style lang="scss" scoped>
.chart_wrap {
  min-height: 100px;
}
</style>
